<template>
<!-- 定制服务 -->
     <!-- 内容 -->
    <div class="content">
        <div class="content-tu">
            <img src="@/assets/img/qt-p1-3.png" alt="">
        </div>
        <div class="content-tu1">
            <img src="@/assets/img/qt-p1-4.png" alt="">
        </div>
        <div class="content-wz clearfix">
            <ul class="content-wz-zuo" >
                <li :class="i==n?'con':''" v-for="(val,i) in dataFuwu" :key="i">
                    <a href="javascript:;" @click="srdz(i)">{{val.name}}</a>
                </li>
                <!-- <li>
                    <a href="javascript:;">硬件定制</a>
                </li>
                <li>
                    <a href="javascript:;">软件定制</a>
                </li>
                <li>
                    <a href="javascript:;">专业APP定制</a>
                </li> -->
            </ul>
            <div class="content-wz-you">
              <!-- <div class="content-wz-you-item"> -->
                <div class="age" v-html="html">
                </div>
                  <!-- </div> -->
                <!-- <div class="content-wz-you-item">
                    <h2>硬件定制</h2>
                    <p>随着手表的定制人数增加，手表的价钱肯定大家关注的首要问题。其实定制手表的价格是不一样的。因为定制的手表考虑的因素会非常多。比如手表的品牌，手表选用的材质，等等，都会影响到最后的价钱。</p>
                    <p>另外，手表定制都是和设计师商量的价格。手表定制在很大程度上是没有固定的价格的。</p>
                </div>
                <div class="content-wz-you-item">
                    <h2>软件定制</h2>
                    <p>选择手表定制的厂家的时候，应该明确自己的需求，比如在产品的款式，数量，材料等因素。因为如果本来是想要定制一只机械表，结果去到了制作石英表的工厂那肯定就不合适啦！而且先确定厂家的话，可以尽快报价。</p>
                    <p>其次，在选择手表制作厂家的时候，应该进行一次实地考察。了解一下工厂的规模，生产环境以及生产厂家的资质证明等等。例如营业执照等相关的许可证，这样才有利于判断一家工厂的好坏。而且每一家工厂都会有定制成功的案列，案列也是见证实力的一种方式。</p>
                </div>
                <div class="content-wz-you-item">
                    <h2>专业APP定制</h2>
                    <p>随着手表的定制人数增加，手表的价钱肯定大家关注的首要问题。其实定制手表的价格是不一样的。因为定制的手表考虑的因素会非常多。比如手表的品牌，手表选用的材质，等等，都会影响到最后的价钱。</p>
                    <p>另外，手表定制都是和设计师商量的价格。手表定制在很大程度上是没有固定的价格的。</p>
                </div> -->
            </div>
        </div>
    </div>
</template>
<style src='@/assets/css/service.css'>
.age h2{
    text-align: center;
}
</style>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { marked } from 'marked'
const html = ref('')
const { proxy } = getCurrentInstance()
const dataFuwu = ref([])
async function fuWu () {
const { data: res } = await proxy.$http.get('customized')
    if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
 } else {
  console.log(res.msg)
  dataFuwu.value = res.msg
      // html.value = marked(res.msg.content)
      res.msg.forEach(val => {
        html.value = marked(val.content)
      })
 }
}
const n = ref(0)
function srdz (i) {
  n.value = i
  html.value = dataFuwu.value[i].content
}

onMounted(() => {
    fuWu()
})
</script>
